<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框与内间距</title>
    <style>
        #d1 {
            width: 200px;
            height: 200px;
            background-color: #0aa1ed;
            /*边框圆角为高度的一半，可以切圆形*/
            /*border-radius: 100px;*/
            border: 5px solid #000;
        }
        #d2 {
            width: 200px;
            height: 200px;
            border: 5px solid green;
            /*上外间距*/
            margin-top: 20px;
            /*左内间距*/
            padding-left: 50px;
            /*上内间距*/
            padding-top: 50px;
            /*box-sizing: content-box; 默认值*/
            /*切换成边框盒子
            效果:加内间距与边框不会让元素变大，都算在width与height里*/
            box-sizing: border-box;
        }
        ul {
            /*去掉无序列表每一项前的标识符(黑色实心圆)*/
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="d1">边框测试</div>
    <div id="d2">内间距测试</div>
    <hr>
    <h1>标题</h1>
    <p>段落</p>
    <button>按钮</button>
    <input type="text">
    <ul>
        <li>你</li>
        <li>们</li>
        <li>好</li>
    </ul>
</body>
</html>